<template>
    <div class="body">
        <!-- <div class="cell-item">
            <span>收货人姓名</span>
            <input type="text" placeholder="收货人姓名" v-model="name" class="input">
        </div> -->
        <div class="all-set">
            <div class="cell-item">
                <span>收货人楼栋</span>
                <!-- <input type="text" :placeholder="floor" readonly v-model="name" class="input"> -->
                <mt-picker :slots="floorList" :visibleItemCount='1' :itemHeight="50" valueKey="name" @change="onFloorChange"></mt-picker>
                <i class="iconfont icon-shangxiahuadong slide"></i>
            </div>
            <div class="cell-item">
                <span>收货人楼层</span>
                <!-- <input type="text" :placeholder="floor" readonly v-model="name" class="input"> -->
                <mt-picker :slots="list" :visibleItemCount='1' :itemHeight="50" valueKey="floor_name" @change="onChange"></mt-picker>
                <i class="iconfont icon-shangxiahuadong slide"></i>
            </div>
            <div class="cell-item">
                <span>收货人详细地址</span>
                <input type="text" placeholder="收货人详细地址" v-model="address" class="input">
            </div>
            <div class="cell-item">
                <span>收货人姓名</span>
                <input type="text" placeholder="收货人姓名" v-model="name" class="input">
            </div>
            <div class="cell-item">
                <span>收货人电话</span>
                <input type="number" placeholder="收货人电话" v-model="phone" class="input">
            </div>
            <div class="cell-item">
                <span>默认地址</span>
                <mt-switch v-model="isDefault" class="switch"></mt-switch>
            </div>
            <section class="login_message login_out">
                <mt-button class="btn" @click="updateAddress" v-if="$route.query.type == 1">修改</mt-button>
                <mt-button class="btn" v-else @click="add">新增</mt-button>
            </section>
        </div>
    </div>
</template>
<script>
import { getFloorList,editAddress,addAddress } from "../api"
import { Toast } from 'mint-ui';
export default {
    name:"addressInfo",
    data() {
        return {
            name:"",
            showPicker:false,
            floorList:[{
                    flex: 1,
                    values: [],
                    textAlign:"left",

                }],
            list:[{
                flex: 1,
                values: [],
                textAlign:"left",
            }],
            floor_id:1,
            address:'',
            phone:'',
            name:'',
            floor:"",
            isDefault:false,
            floorId:1
        }
    },
    created(){
        this.getFloorList();
       let address = this.$store.getters.address_info;
        if(this.$route.query.type == 1){
            this.address = address.address
            this.phone = address.phone
            this.name = address.name
            this.isDefault = address.is_default?true:false,
            this.floor_id = address.dormitory_id
        }
    },
    methods:{
        getFloorList(){
            getFloorList(this.$store.getters.userInfo.school_id).then(res => {
                console.log(res.data);
                this.floorList[0].values = res.data
                this.floor_id = this.$store.getters.userInfo.dormitory_id
                for(let i of this.floorList[0].values){
                    if(i.id == this.$store.getters.userInfo.dormitory_id){
                        this.floor = i.name
                    }
                }
            }).catch(err => {
                console.log(err)
            })
        },
        onFloorChange (picker, values) {
            // console.log(values);
            if(!values[0]) return
            this.floor_id = values[0].id
            this.list[0].values = values[0].floor;
            console.log(this.list);

        },
        onChange(picker,values){
            if(!values[0]) return
            this.floorId = values[0].floor_id;
        },
        updateAddress(){
            if(this.$store.getters.address_info.is_default && !this.isDefault){
                Toast("请选择一个地址为默认地址");
                return;
            }
            const data = {
            id:this.$store.getters.address_info.id,
            user_id:this.$store.getters.userInfo.id,
            phone:this.phone,
            is_default:this.isDefault?1:0,
            address:this.address,
            dormitory_id:this.floor_id,
            floor_id:this.floorId,
            name:this.name,
            token:this.$store.getters.token}
            if(!this.check(data)){
                return
            }
            editAddress(data).then(res=>{
                if(res.code == 200){
                    // console.log(res);
                    Toast(res.msg);
                    this.$store.commit("ADD_ADDRESS",{address:this.address,dormitory_name:this.floor,dormitory_id:this.floor_id})
                }else{
                    Toast(res.msg);
                }
                
            })
        },
        add(){
            const data = {
                name:this.name,
                user_id:this.$store.getters.userInfo.id,
                token:this.$store.getters.token,
                phone:this.phone,
                address:this.address,
                dormitory_id:this.floor_id,
                floor_id:this.floorId,
                is_default:this.isDefault?1:0
            }
            if(!this.check(data)){
                return
            }
            addAddress(data).then(res=>{
                Toast(res.msg);
                if(res.code == 200){
                    this.$router.go(-1)
                }
            })
        },
        check(data){
            if(!data.name){
                Toast("请输入收货人姓名")
                return false;
            }else if(!data.phone){
                Toast("请输入收货人号码")
                return false;
            }else if(!/^1[3-9]\d{9}$/.test(this.phone)){
                Toast("收货人号码格式错误")
                return false;
            }else if(!data.address){
                Toast("请输入收货人详细地址")
                return false;
            }else if(!data.dormitory_id){
                Toast("请选择宿舍楼栋")
                return false;
            }else{
                return true;
            }
        }
    }
}
</script>
<style scoped>
    .body{
        background: #d8d8d8;
        height: Calc(100vh - 3rem);
    }
    .body::before{
        content: "";
        display: table;
    }
    .all-set{
        background: #fff;
        width: 90%;
        border-radius: 10px;
        margin: 2rem auto;
    }
    .cell-item {
        width: 90%;
        height: 3rem;
        border-bottom: 1px solid #ccc;
        margin: auto;
        line-height:3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1rem;
        background: #fff;
    }
    .cell-item .input{
        border: none;
        width: 50%;
        font-size: 1rem;
    }
    .cell-item .input:focus{
        outline: none;
    }
    .picker {
        width: 50%;
    }
    .btn{
        background: #F0463C; 
        width: 80%;
        color: white;
        height: 3rem;
        font-size: 1rem;
        margin: 1rem auto;
        border-radius: 0.15625rem;
    }
    .cell-item{
        position: relative;
    }
    .switch{
        margin-right: 1rem;
    }
    .body >>> .mint-switch-input:checked + .mint-switch-core{
        background: #F0463C;
    }
    .body >>> .picker-slot {
        font-size: 1rem;
    }
</style>